<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
    <meta charset="utf-8">
    <title>颜色识别能力测试</title>
</head>

<body>
<div style="text-align: center;">
    <div id="buttonDiv" style="text-align: center;margin-top: 8%;float:left;">
        <div>只看颜色三原色成分组成，不看亮度和深浅，选出与众不同的那个</div>
        <div>
            <select id="backgroundColor" class="select">
                <option class="option" value ="red"  selected = "selected">红</option>
                <option class="option" value ="green">绿</option>
                <option class="option" value="blue">蓝</option>
            </select>
            <select id="findColor" class="select">
                <option class="option" value ="red">红</option>
                <option class="option" value ="green"  selected = "selected">绿</option>
                <option class="option" value="blue">蓝</option>
            </select>
        </div>
        <div>
            <span id="levelText">level:</span><label  id="level">0</label>
        </div>
        <div>
            <button style="height: 30px;width: 80px;" id="begin" onclick="begin()">开始</button>
        </div>
    </div>
    <div style="">
        <canvas id="colorCanvas" width="620" height="620" style="border:2px solid #e2e2e2;margin-top: 5px;"></canvas>
    </div>
</div>
</body>
<style>
    .select {
        margin: 10px;
        width: 80px;
        height: 30px;
    }
    .option {
        margin: 2px;
        width: 80px;
        height: 10px;
    }
</style>
<script>

    var colorCanvas = document.getElementById("colorCanvas");
    var ctx=colorCanvas.getContext("2d");

    var wHeight = window.screen.height;
    var wWidth = window.screen.width;

    var sideLength = wHeight;
    if (wWidth < wHeight) {
        sideLength = wWidth;
        var style = document.getElementById("buttonDiv").style;
        style.removeProperty("float");
        style.setProperty("margin-top", "40%");
    }

    colorCanvas.height = sideLength * 0.8;
    colorCanvas.width = sideLength * 0.8;

    var ColorCanvas = function () {

        this.sideSize = 5;

        this.width = colorCanvas.width;

        this.height = colorCanvas.height;

        this.gap = 5;

        this.totalTime = 20;

        this.colorNum = 32;

        this.baseScale = 1;

        this.borderColor = "#e2e2e2";

        this.oneUnitWidth = (this.width + this.gap) / this.sideSize;

        this.oneUnitHeight = (this.height + this.gap) / this.sideSize;

        this.oneWidth = this.oneUnitWidth - this.gap;

        this.oneHeight = this.oneUnitHeight - this.gap;;

        this.backgroundColor = "red";

        this.findColor = "green";

        this.correctTimes = 0;

        this.findX = -1;

        this.findY = -1;

        this.drawColor = function () {
            ctx.clearRect(0, 0, this.width, this.height);

            ctx.fillStyle=this.borderColor;
            ctx.fillRect(0, 0, this.width, this.height);

            this.findX = randomNum(this.sideSize);
            this.findY = randomNum(this.sideSize);

            for (var x = 0; x < this.sideSize; x++) {
                for (var y = 0; y < this.sideSize; y++) {
                    if (x === this.findX && y === this.findY) {
                        ctx.fillStyle = this.getFindColor();
                    } else {
                        ctx.fillStyle = this.getBackgroundColor();
                    }

                    var curY = this.oneUnitHeight * y;
                    var curHeight = this.oneHeight;

                    var curX = this.oneUnitWidth * x;
                    var curWidth = this.oneWidth;

                    ctx.fillRect(curX, curY, curWidth, curHeight);
                }
            }

        };

        this.getOneColor = function () {
            var oneColorScale = 256 / 2 / this.colorNum;
            var colorGap = this.correctTimes * oneColorScale;
            var backGroundColor = 255 - colorGap;
            var findColor = colorGap;

            var random = randomNum(50, 100) / 100.0;
            backGroundColor = parseInt(backGroundColor * random);
            findColor = parseInt(findColor * random);

            return {backGroundColor: backGroundColor, findColor: findColor};
        };

        this.getColorStr = function (backGroundColor, findColor) {

            var color = "#";

            var colorPosition = ["red", "green", "blue"];

            for (var i = 0 ;i < colorPosition.length; i++) {
                var curColor = colorPosition[i];
                if (curColor === this.backgroundColor && curColor === this.findColor) {
                    color += addPreZero((backGroundColor + findColor).toString(16), 2);
                } else if (curColor === this.backgroundColor) {
                    color += addPreZero(backGroundColor.toString(16), 2);
                } else if (curColor === this.findColor) {
                    color += addPreZero(findColor.toString(16), 2);
                } else {
                    color += "00";
                }
            }

            return color;
        };

        this.getBackgroundColor = function () {
            var colorResult = this.getOneColor();
            var backGroundColor = colorResult.backGroundColor;

            var findColor = colorResult.findColor;

            var color = this.getColorStr(backGroundColor, findColor, colorResult);

            return color;
        };

        this.getFindColor = function () {
            var colorResult = this.getOneColor();
            var backGroundColor = colorResult.backGroundColor;
            var findColor = colorResult.findColor;

            var color = this.getColorStr(findColor, backGroundColor, colorResult);

            return color;
        };

        this.clickSquare = function (x, y) {
            if (x === this.findX && y === this.findY) {
                if (this.correctTimes >= 31) {
                    this.correctTimes = 0;
                    return 2;
                }
                this.correctTimes ++;
                return 0;
            } else {
                return 1;
            }

        };

        this.reset = function () {

            this.backgroundColor = getSelectedOptionValue("backgroundColor");

            this.findColor = getSelectedOptionValue("findColor");

            this.correctTimes = 0;
            this.totalTime = 20;
        }


    };

    var colorCanvasObj = new ColorCanvas();
    colorCanvasObj.reset();
    document.getElementById("levelText").innerText = "level(最小 0 ，最大" + (colorCanvasObj.colorNum) + "):";
    colorCanvasObj.drawColor();

    function getSelectedOptionValue(id) {
        var select = document.getElementById(id);
        var selectedIndex = select.selectedIndex;
        var options = select.options;
        return options[selectedIndex].value;
    }

    //生成从minNum到maxNum的随机数
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum, 10);
                break;
            case 2:
                return parseInt(Math.random() * ( maxNum - minNum) + minNum, 10);
                break;
            default:
                return 0;
                break;
        }
    }

    function addPreZero(num, length) {
        var t = (num + '').length,
            s = '';

        for (var i = 0; i < length - t; i++) {
            s += '0';
        }

        return s + num;
    }

    function begin() {
        colorCanvasObj.reset();

        var correctTimes = colorCanvasObj.correctTimes;
        document.getElementById("level").innerHTML = correctTimes;

        colorCanvasObj.drawColor();
    }

    window.onload = function () {
        var x = 0;
        var y = 0;

        colorCanvas.addEventListener('click', function (e) {
            x = e.pageX - colorCanvas.offsetLeft;
            y = e.pageY - colorCanvas.offsetTop;
            console.log(x+" "+y);

            var curX = Math.floor(x / colorCanvasObj.oneUnitWidth);


            var curY = Math.floor(y / colorCanvasObj.oneUnitWidth);

            var result = colorCanvasObj.clickSquare(curX, curY);

            var correctTimes = colorCanvasObj.correctTimes;

            if (result === 1) {
                alert("您通过了 " + correctTimes + "关！");
                colorCanvasObj.reset();
                correctTimes = colorCanvasObj.correctTimes;
            } else if (result === 2) {
                alert("恭喜，32 关全部通过！");
                colorCanvasObj.reset();
                correctTimes = colorCanvasObj.correctTimes;
            }

            document.getElementById("level").innerHTML = correctTimes;

            colorCanvasObj.drawColor();

        });
    }

</script>
</html>